<template>
  <view class="user-section">
    <view class="shop-info" v-if="order.is_offline == 1">
      <!-- <image :src="asyncImgs.alipay.local_icon" alt="" mode="aspectFit"></image> -->
      <i class="iconfont icon-seat" style="font-size: 42rpx;margin-right:12rpx;"></i>
      <text class="user-name">{{ order.shop.name }}</text>
    </view>
    <view
      class="user-info shop-info"
      :class="{ addPadding: order.is_offline == 1 }"
    >
      <i
        class="iconfont icon-seat"
        v-if="order.is_offline != 1"
        style="font-size: 42rpx;margin-right:12rpx;"
      ></i>
      <text class="user-name">{{ order.name }}</text>
      <text>{{ order.mobile | noPassByMobile }}</text>
    </view>
    <view class="address-info text-more-2"
      >{{ $t("common.address") }}：{{
        order.is_offline == 1 ? order.shop.address : order.address
      }}</view
    >
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    order: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  filters: {
    noPassByMobile(str) {
      if (null != str && str != undefined) {
        var pat = /(\d{3})\d*(\d{4})/;
        return str.replace(pat, "$1****$2");
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.user-section {
  width: 100%;
  background: #ffffff;
  padding: 30rpx 52rpx 30rpx 24rpx;
  margin-bottom: 24rpx;

  .shop-info {
    margin-bottom: 14rpx;
    display: flex;
    align-items: center;
    font-weight: 600;
    line-height: 40rpx;
    font-size: 28rpx;
    .user-name {
      margin-right: 22rpx;
      
    }
  }

  .addPadding {
    padding-left: 37rpx;
  }

  .address-info {
    font-size: 24rpx;
    line-height: 38rpx;
    color: #8c8c8c;
  }
}
</style>
